<template>
	<view style="height: 100vh;">
		<view class="searchtop">
			<u-search  :show-action="true" :animation='true' @search="ondang()" @custom="ondang()" v-model="searchtext" bgColor="#fff"></u-search>
		</view>
		<view class="SoS_suo">
			<view class="history">搜索历史</view>
			<view class="clears" style="" @click="dele()">清空全部</view>
		</view>
		<view class="Sos_xia">
	
			<view v-for="(ys,index) in list " :key='index' class="xia_a" @click="test(list[index])">
				{{ys}}
			</view>
	
		</view>
	</view>
	
</template>



<script>
	export default {
		data() {
			return {
				searchtext: '',
				list: [],
				type:null,
			}
		},
		created(){
			let curPage = getCurrentPages();
			let params = curPage[curPage.length - 1].options;
			// console.log(params.typess)
			this.type = params.typess;
		},
		methods: {
			test(){
			},
			// 键盘事件   把input框的内容获取到 然后保存到数组里  再渲染页面 
			// 存到本地 来达到刷新页面  数据依旧在的效果
			ondang() {
				// console.log(this.searchtext)
				//unshift:跟push性质一样 区别就是将新添加的数据放在第一位
				this.list.unshift(this.searchtext)
				
				uni.setStorage({ //本地保存 
					key: 'searchtext',
					data: JSON.stringify(this.list)//转换为字符串形式
				})
				uni.reLaunch({
					url: '/pages/community/community?type='+this.type+"&text="+this.searchtext,
				});
			},
			test(values){
				this.searchtext = values;
			},

			// 清空效果
			dele() {
				this.list =[]
				uni.removeStorage({
					key: 'searchtext',
					success: function(res) {
						uni.showToast({
							title:'清空成功'
						})
					}
				});
			}
		},
	// 效果：添加的搜索记录保存在页面,不被刷新消失
	// 1.取数据 在onLoad生命周期中取  onLoad:页面的初始化 
	// 2.用async  await  来获取内容  因为返回的结果是个promise
	// 3. 最后把结果附给数组 让数组获取到取出的值
		async onLoad() {
			// var listsss = []
			var ges = await uni.getStorage({
				key: 'searchtext'
			})
			if(ges.length > 1){
				this.list = JSON.parse(ges[1].data)
			}
			
			//JSON.parse：取数据的时候再把字符串数据转换为对象
			// console.log(typeof this.list)

		},
	}
</script>
<style>
</style>
<style>
	
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background-color: #e8eaed;
	}
	.searchtop{
	}
	.sos_box {
		width: 100%;
		// height: 60rpx;
		display: flex;
		background-color: #E80080;
	}
	.Sos_xia {
		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	
	.xia_a {
		// border: 1px solid #9E9A95;
		border-radius: 999rem;
		margin: 10rpx 20rpx;
		background-color: #d3d5d7;
		padding: 0 40upx;
	}
	
	.SoS_suo {
		width: 100%;
		display: flex;
		justify-content: space-between;
		// background-color: #E1E1E1;
		padding: 20upx 0;
		margin: 0;
	}
	.history{
		padding-left: 20upx;
		font-weight: 600;
	}
	.clears{
		border-radius: 999rem;
		border: 1px solid red;
		color: red;
		padding: 0 20upx;
	}
</style>


